<template>
    <section>
        <el-table :data='tableData' v-bind='tableAttributes' v-on='tableEvents'>
            <template v-for="(item, index) in tableColumn">
                <el-table-column :key="index" v-bind="item">
                    <template slot-scope="scope">
                        <template>{{scope.row[item.prop]}}</template>
                        <template v-if="typeof item.tags == 'object'">
                            <el-tag v-for="(col, i) in item.tags" :key='i' v-on="col.events && col.events(scope.row)" v-bind="col.attributes">{{col.text}}</el-tag>
                        </template>
                        <template v-if="typeof item.buttons == 'object'">
                            <el-button v-for="(col, i) in item.buttons" :key='i' v-on="col.events && col.events(scope.row)" v-bind="col.attributes" >{{col.text}}</el-button>
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination class="page-box" v-if="tableData.length" layout='prev, pager, next' v-bind="pageAttributes"></el-pagination>
    </section>
</template>
<script>

export default {
    name: 'UiTable',
    title: '表格',
    props: {
        tableData: {
            type: Array,
            default: () => []
        },
        tableAttributes: {
            type: [Object],
            default: () => {
                return {
                    'border': true
                }
            }
        },
        tableEvents: {
            type: [Object],
            default () {
                return {}
            }
        },
        tableColumn: {
            type: [Array],
            default: () => []
        },
        pageAttributes: {
            type: Object,
            default: () => {}
        },
        pageEvents: {
            type: Object,
            default: () => {}
        }
    }
}
</script>

<style scoped>
    .page-box{
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
</style>
